<template>
  <div>
    <el-row style="background:#ffffff;padding:10px">
      <el-button
        type="success"
        plain
        size="small"
        icon="el-icon-refresh-right"
        style="float:right;"
        @click="getThirdCompany()"
      ></el-button>
      <el-button
        type="primary"
        plain
        size="small"
        style="float:right;margin-right:10px"
        @click="mAddDialog=true;mSelectRow={};"
      >添加</el-button>
    </el-row>
    <el-table
      :data="mTableData"
      v-loading="mTableLoading"
      border
      stripe
      style="width: 100%;margin-top:20px"
    >
      <el-table-column label="编号" prop="companyId" width="120"></el-table-column>
      <el-table-column label="公司名" prop="companyName"></el-table-column>
      <el-table-column label="管理人姓名" prop="userx.name"></el-table-column>
      <el-table-column label="管理人电话" prop="userx.tel"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showRow(scope.row)" type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top:10px;padding-bottom:10px">
      <el-pagination
        style="float:right"
        v-if="totalPage"
        background
        layout="prev, pager, next,jumper"
        @current-change="pageIndexChange()"
        :current-page.sync="page"
        :page-count="totalPage"
      ></el-pagination>
      <span
        v-if="totalPage"
        style="float:right;font-size:14px;margin-top:5px;color:#606266;margin-right:20px"
      >
        共&nbsp;
        <span style="color:#F56C6C">{{totalPage}}</span>&nbsp;页/&nbsp;
        <span style="color:#F56C6C">{{totalCount}}</span>&nbsp;条数据
      </span>
    </el-row>

    <!-- // 对话框 -->

    <el-dialog title="编辑三方公司" :visible.sync="mEditDialog" width="30%">
      <el-form label-width="100px">
        <el-form-item label="公司名">
          <el-input placeholder="请输入公司名字" v-model="mSelectRow.companyName"></el-input>
        </el-form-item>
        <el-form-item label="管理人姓名">
          <el-input placeholder="请输入管理人姓名" v-model="mSelectRow.user_name"></el-input>
        </el-form-item>
        <el-form-item label="管理人电话">
          <el-input placeholder="请输入管理人电话" v-model="mSelectRow.user_tel"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="mdfyThirdCompany()">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加三方公司" :visible.sync="mAddDialog" width="30%">
      <el-form label-width="100px">
        <el-form-item label="公司名">
          <el-input placeholder="请输入公司名字" v-model="mSelectRow.companyName"></el-input>
        </el-form-item>
        <el-form-item label="管理人姓名">
          <el-input placeholder="请输入管理人姓名" v-model="mSelectRow.user_name"></el-input>
        </el-form-item>
        <el-form-item label="管理人电话">
          <el-input placeholder="请输入管理人电话" v-model="mSelectRow.user_tel"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addThirdCompany()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style >
.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
.spanPoint {
  cursor: pointer;
}
.borderMain {
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.borderAround {
  padding: 10px;
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.ctrlCard {
}
</style>



<script>
import { getRequestHeader, loginApi, getThirdCompanyApi } from "../api/user.js";
import { getCarsApi } from "../api/car.js";
import { getNowFormatDate, getWeekToday } from "../api/util.js";
import { turnOrderStatus } from "../api/orderHelper.js";
import {
  getThirdCompanyApi2,
  updateThirdCompanyApi,
  addThirdCompanyApi
} from "../api/thirdCompany.js";
import {
  queryLogsApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi
} from "../api/order.js";
import { Loading } from "element-ui";
import OrderDetailDialog from "./widget/OrderDetailDialog.vue";
export default {
  data() {
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 12,
      totalCount: 0,

      pageCar: 1,
      totalPageCar: 0,
      pagesizeCar: 2,

      pageDriver: 1,
      totalPageDriver: 0,
      pagesizeDriver: 2,

      mOrderStatus: "all",
      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mActiveTabName: "first",
      mTmpCtrls: [],
      mCarSelectDialog: false,
      mDriverSelectDialog: false,
      mSearchKey: undefined,
      mDateRange: undefined,
      mSelectDriver: undefined,
      mFilter: undefined,
      mSelectCar: undefined,
      mTabActive: "first",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      mLogType: [
        { label: "全部", value: "all" },
        { label: "登录日志", value: "LoginType" },
        { label: "调度日志", value: "ControllerType" }
      ],
      mSelectThirdCompany: undefined,
      mEditDialog: false,
      mAddDialog: false
    };
  },
  components: {
    "v-OrderDetailDialog": OrderDetailDialog
  },
  created() {},
  mounted() {
    this.getThirdCompany();
  },
  watch: {
    // mOrderStatus(v1, v2) {
    //   this.searchAll();
    // }
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    setPagesize(size) {
      this.page = 1;
      this.pagesize = size;
      this.queryLogs();
    },
    pageIndexChange() {
      // this.page = this.mUiPageIndex - 1;
      this.getThirdCompany();
    },
    calDate() {
      var d = {};
      d.start = undefined;
      d.end = getNowFormatDate() + " 23:59:59";
      if (this.mDateRange) {
        var arrs = ("" + this.mDateRange).split(",");
        if (arrs && arrs.length == 2) {
          d.start = arrs[0];
          d.end = arrs[1] + " 23:59:59";
        }
      }
      return d;
    },
    getThirdCompany() {
      var that = this;
      that.mTableLoading = true;
      var dateR = this.calDate();
      var ll = getRequestHeader();
      // console.log(ll);
      getThirdCompanyApi2(
        getRequestHeader(),
        this.page,
        this.pagesize,
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mTableLoading = false;
            that.page = data.currentPage;
            that.totalCount = data.totalCount;
            that.totalPage = data.totalPage;
            data.list.forEach(element => {
              if (!element.userx) {
                element.userx = {};
              }
            });
            that.mTableData = data.list;
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.mTableLoading = false;
            that.mTableData = [];
          };
        })()
      );
    },

    searchAll() {
      this.page = 1;
      this.mFilter = {};
      this.mFilter.logType = this.mOrderStatus;
      this.queryLogs();
    },
    showRow(row) {
      this.mEditDialog = true;
      row.user_name = row.userx.name;
      row.user_tel = row.userx.tel;
      row.userId = row.userx.userId;
      this.mSelectRow = JSON.parse(JSON.stringify(row)); // 深度复制
    },
    mdfyThirdCompany() {
      var that = this;

      //
      var dataReq = {};
      dataReq.userId = that.mSelectRow.userId;
      dataReq.companyId = that.mSelectRow.companyId;
      dataReq.companyName = that.mSelectRow.companyName;
      dataReq.user_name = that.mSelectRow.user_name;
      dataReq.user_tel = that.mSelectRow.user_tel;
      dataReq.companyId = that.mSelectRow.companyId;
      if (!dataReq.companyName) {
        that.$message.error("输入公司名");
        return;
      }
      if (!dataReq.user_name) {
        that.$message.error("输入管理人姓名");
        return;
      }
      if (!dataReq.user_tel) {
        that.$message.error("输入管理人电话");
        return;
      }
      that.showFullLoading();
      updateThirdCompanyApi(
        getRequestHeader(),
        dataReq,
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mEditDialog = false;
            that.$message.success("成功");
            that.getThirdCompany();
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
        })()
      );
    },
    addThirdCompany() {
      var that = this;
      //
      var dataReq = {};
      dataReq.companyName = that.mSelectRow.companyName;
      dataReq.user_name = that.mSelectRow.user_name;
      dataReq.user_tel = that.mSelectRow.user_tel;
      if (!dataReq.companyName) {
        that.$message.error("输入公司名");
        return;
      }
      if (!dataReq.user_name) {
        that.$message.error("输入管理人姓名");
        return;
      }
      if (!dataReq.user_tel) {
        that.$message.error("输入管理人电话");
        return;
      }
      that.showFullLoading();
      addThirdCompanyApi(
        getRequestHeader(),
        dataReq,
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mAddDialog = false;
            that.$message.success("成功");
            that.getThirdCompany();
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
        })()
      );
    }
    //----------over methods------
  }
};
</script>